<template>
  <!-- 审核人配置 -->
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本设置" name="base">
        <div>
          <div>
            <div class="title">请选择该节点的审批人</div>
            <div>
              <el-radio-group v-model="props.config.handlerScope" @change="changeHandlerScope">
                <el-radio :label="1">指定人员</el-radio>
                <el-radio :label="2">部门主管</el-radio>
                <el-radio :label="3">连续多级主管</el-radio>
                <el-radio :label="4">发起人自选</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div v-if="props.config.handlerScope === 1">
            <div class="title">指定成员(不能超过20人)</div>
            <div>
              <OrgSelectView v-model="props.config.handlers" :enableRole="true" :multiple-size="20"/>
            </div>
          </div>
          <div v-if="props.config.handlerScope === 3">
            <div class="title">连续多级主管审批终点</div>
            <div>
              <el-select v-model="props.config.leaderHierarchyLimit" class="select-max-width">
                <el-option label="第一级主管" :value="1"/>
                <el-option label="第二级主管" :value="2"/>
                <el-option label="第三级主管" :value="3"/>
                <el-option label="第四级主管" :value="4"/>
                <el-option label="第五级主管" :value="5"/>
                <el-option label="第六级主管" :value="6"/>
                <el-option label="第七级主管" :value="7"/>
                <el-option label="第八级主管" :value="8"/>
                <el-option label="第九级主管" :value="9"/>
                <el-option label="第十级主管" :value="10"/>
              </el-select>
            </div>
          </div>
          <div v-if="props.config.handlerScope === 4">
            <div class="title">发起人自选</div>
            <div>
              <el-select v-model="props.config.selfSelectionType">
                <el-option label="自选一个人" :value="1"/>
                <el-option label="自选多个人" :value="2"/>
              </el-select>
              <el-select v-model="props.config.selfSelectionScope">
                <el-option label="全公司" :value="1"/>
                <el-option label="指定人员" :value="2"/>
              </el-select>
              <div class="self-selection-scope" v-if="props.config.selfSelectionScope === 2">
                <OrgSelectView v-model="props.config.selfSelectionItems" />
              </div>
            </div>
          </div>
          <div>
            <div class="title">多人审批时采用的审批方式</div>
            <div>
              <el-select v-model="props.config.handleModel" class="select-max-width">
                <el-option label="依次审批（按顺序同意或拒绝）" :value="1"/>
                <el-option label="会签（需要所有审批人都同意才可通过）" :value="2"/>
                <el-option label="或签（其中一名审批人同意或拒绝即可）" :value="3"/>
              </el-select>
            </div>
          </div>
          <div>
            <div class="title">审批人为空时</div>
            <div>
              <el-select v-model="props.config.leaderHierarchyLimit" class="select-max-width">
                <el-option label="自动通过" :value="1"/>
                <el-option label="自动转交管理员" :value="2"/>
                <el-option label="指定人员审批" :value="3"/>
              </el-select>
            </div>
          </div>
        </div>

      </el-tab-pane>
      <el-tab-pane label="表单操作权限" name="permissions">
        <Permissions :config="props.config" :node-type="APPROVER"/>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script setup name="ApproverDrawer">
import OrgSelectView from "@/components/OrgSelect/OrgSelectView.vue";
import Permissions from "../../components/Permissions";
import {APPROVER} from "@/components/EasyProcess/config/nodeType";
import {getCurrentInstance, inject, onMounted, ref} from "vue";
import { KEY_PROCESS_DATA } from "../../config/keys"

const props = defineProps({
  config: { // 传入的流程配置数据
    type: Object,
    default: {}
  }
});

const { proxy } = getCurrentInstance();
const activeName = ref('base')

// 获取流程数据
const processData = inject(KEY_PROCESS_DATA)

onMounted(async () => {
  init()
});

function init() {
  if (!props.config.handlerScope) {
    props.config.handlerScope = 1
  }
  if (!props.config.leaderHierarchyLimit) {
    props.config.leaderHierarchyLimit = 1
  }
  if (!props.config.handlers) {
    props.config.handlers = []
  }
  if (!props.config.selfSelectionType) {
    props.config.selfSelectionType = 1
  }
  if (!props.config.selfSelectionScope) {
    props.config.selfSelectionScope = 1
  }
  if (!props.config.selfSelectionItems) {
    props.config.selfSelectionItems = []
  }
  if (!props.config.handleModel) {
    props.config.handleModel = 1
  }
  if (!props.config.whenHandlerEmpty) {
    props.config.whenHandlerEmpty = 2
  }
  if (!props.config.careOfUserList) {
    props.config.careOfUserList = []
  }
}

function changeHandlerScope() {
  props.config.leaderHierarchyLimit = 1
  props.config.handlers = []
  props.config.selfSelectionType = 1
  props.config.selfSelectionScope = 1
  props.config.selfSelectionItems = []
}

</script>

<style lang="less" scoped>
.title {
  margin: 10px 0;
  font-weight: bold;
  font-size: 14px;
}
.self-selection-scope {
  margin-top: 10px;
}
.select-max-width {
  width: 100%;
}
</style>
